<template>
  <div>
    <!-- 当前委托 -->
    <el-table
      :data="state.tableData"
      class="customer-table"
      max-height="250"
      header-cell-class-name="eltablebg"
      style="width: 100%"
    >
      <el-table-column prop="" :label="$t('stock.stockName')">
        <template #default="r">
          <div class="flex align-center js-st">
            <div>{{ r.row.stock_name }}</div>
            <div
              class="share-color text-10 tag us"
              v-if="r.row.stock_type === 1"
            >
              US
            </div>
            <div
              class="share-color text-10 tag hk"
              v-if="r.row.stock_type === 2"
            >
              HK
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="stock_code" :label="$t('stock.stockCode')">
      </el-table-column>
      <el-table-column prop="direction" :label="$t('exchange.type')">
        <template #default="r">
          <span :class="r.row.direction === 1 ? 'text-red' : 'text-green'">{{
            r.row.direction === 1 ? $t("exchange.buy") : $t("exchange.sell")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total_amount" :label="$t('legal.num')">
        <template #default="r">
          {{ $currency(r.row.total_amount) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="unit_price"
        :label="$t('stock.commissionPrice')"
      >
        <template #default="r">
          {{ $currency(r.row.unit_price) }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="order_fee"
        prop=""
        :label="$t('exchange.handlingFee')"
      >
        <template #default="r">
          {{ $currency(r.row.order_fee) }}
        </template>
      </el-table-column> -->
      <el-table-column
        align="center"
        prop="create_time"
        :label="$t('Currency.time')"
      >
        <template #default="r">
          <span>{{ getTimeZoneDate(r.row.create_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" prop="" :label="$t('assets.operate')">
        <template #default="r">
          <el-button type="text" @click="winloseStop(r.row.id)">
            {{ $t("exchange.cancelOrder") }}</el-button
          >
        </template>
      </el-table-column>
      <template #empty>
        <div>
          <Norecord :useDark="true" />
          <!-- <div class="quotet3 text-12 mb-60 l-10">暂无数据</div> -->
        </div>
      </template>
    </el-table>

    <!-- 取消订单 -->
    <Messagebox
      :dialog="state.dialog"
      :text="$t('lever.confirmcancel')"
      :type="3"
      @onconfirm="confirm"
      @oncancer="state.dialog = false"
    />
    <!-- 监听table滚动条触底 -->
    <Tablescroll @scroll="tableScroll" />
  </div>
</template>

<script>
import Norecord from "@/components/noRecord/NoRecord.vue";
import { stockOrderPage, stockOrderCancelOrder } from "@/api/stock";
import { demostockOrderCancelOrder, demostockOrderPage } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { onMounted, reactive, watch } from "vue";
import Messagebox from "@/components/messageBox/index.vue";
import Tablescroll from "@/components/tablescroll/index.vue";
// import { LoginInterception } from "@/utils/common";
import { getTimeZoneDate } from "@/utils/times.js";
import { useStore } from "vuex";
export default {
  name: "OrderRecord",
  components: { Norecord, Messagebox, Tablescroll },
  props: { checked: Boolean, tradingid: Number, nowprice: Number },
  setup(props) {
    const state = reactive({
      listParam: {
        page: 0,
        limit: 4,
        order_status: 1,
      },
      loading: false,
      tableData: [],
      tradingid: props.tradingid,
      dialog: false,
      cancerid: 0,
      total: 0,
      checked: props.checked,
    });
    const $store = useStore();
    /**
     * methods
     */
    // eslint-disable-next-line no-unused-vars
    watch(
      () => props.tradingid,
      (val) => {
        if (val !== state.tradingid) {
          state.tradingid = val;
          state.listParam.page = 0;
          getList();
        }
      }
    );

    watch(
      () => props.checked,
      (val) => {
        console.log(val);
        state.listParam.page = 0;
        getList();
      }
    );

    const refresh = () => {
      state.listParam.page = 0;
      getList();
    };
    onMounted(() => {
      if ($store.state.user.token) {
        getList();
      }
    });
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    // 取消订单
    const winloseStop = (id) => {
      state.cancerid = id;
      state.dialog = true;
    };
    //  确认取消
    const confirm = () => {
      let setFun = virtual_wallet.value
        ? demostockOrderCancelOrder
        : stockOrderCancelOrder;
      setFun(state.cancerid).then((res) => {
        if (res.code === 200) {
          state.listParam.page = 0;
          // $store.commit("exchange/SET_REVOKEORDER", true);
          getList();
        }
      });
    };
    const tableScroll = () => {
      console.log("111", state.total, state.tableData.length);
      if (state.total > state.tableData.length) {
        state.listParam.page = state.listParam.page + 1;
        console.log(state.listParam.page);
        getList();
      }
    };

    const getList = () => {
      if (!$store.state.user.token) {
        return;
      }
      const param = { ...state.listParam };
      param.stock_id = props.tradingid;
      state.loading = true;
      let setFun = virtual_wallet.value ? demostockOrderPage : stockOrderPage;
      setFun(param).then((res) => {
        state.loading = false;
        if (state.listParam.page === 0) {
          state.tableData = res.data.items;
        } else {
          state.tableData = state.tableData.concat(res.data.items);
        }
        state.total = res.data.total;
      });
    };
    return {
      state,
      getList,
      winloseStop,
      confirm,
      tableScroll,
      getTimeZoneDate,
      refresh,
    };
  },
};
</script>

<style scoped lang="less">
.tag {
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1;
  margin-inline-start: 4px;
}
.us {
  width: 26px;
  background: #e54b4b;
}
.hk {
  width: 26px;
  background: #1987ed;
}
</style>
